<!--  -->
<template>
  <div class="group">
    团购管理
    <div class="content">
      <div class="content-top">
        搜索
        <van-search v-model="search" placeholder="姓名" />
        状态：
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          >
          </el-option>
        </el-select>
      </div>
      <div class="content-bottom">
        <el-table :data="list" style="width: 100%">
          <el-table-column label="序号" width="180" height="50" prop="id" />
          <el-table-column label="图片" width="180" prop="number" />
          <el-table-column label="楼盘名称" width="180" prop="title" />
          <el-table-column label="楼盘地址" width="180" prop="address" />
          <el-table-column label="发起人" width="180" prop="name" />
          <el-table-column label="起始时间" width="180" prop="date" />
          <el-table-column label="状态" width="180" prop="type" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="handleDelete(scope.row.id)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getGroupList } from "@/api";
export default {
  // 组件状态值
  data() {
    return {
      list: [],
      options: [
        {
          value: "选项1",
          label: "直播中",
        },
        {
          value: "选项2",
          label: "已结束",
        },
      ],
      value: "",
      search: "",
    };
  },
  // 计算属性
  computed: {},
  // 组件方法
  methods: {
    //获取数据
    async getList() {
      const res = await getGroupList();
      console.log(res);
      this.list = res.data.data;
    },
    //删除
    handleDelete(id) {},
  },
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    //获取数据
    this.getList();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang="scss" scoped>
.group {
  width: 100%;
  height: 100%;
  background: rgb(240, 240, 240);
  padding: 5px 10px;
}
.content {
  width: 100%;
  height: 95.5%;
  margin-top: 5px;
  background: #fff;
}
.content-top {
  display: flex;
  align-items: center;
}
</style>
